<template>
<div class="hello">
  <h1>{{ msg }}</h1>
  对象存储器中的数据a={{ this.$store.state.a }}
  <br />
  store中的a={{ a }} ,data中num={{ num }}
  <br />
  <button @click="add">+1</button>
  <br />
  <button @click="updatePass({ pass: '000000', num: 10 })">修改密码</button>
  <hr />
  <div>
    <ul>
      <li v-for="(item, index) in student" :key="index">{{ item.id }}--{{ item.name }}--{{ item.pass }}</li>
    </ul>
  </div>
</div>
</template>

<script>
import {
  mapMutations,
  mapState
} from 'vuex'
export default {
  name: 'HelloWorld',
  data() {
    return {
      num: this.$store.state.a
    }
  },
  computed: {
    // a() {
    //   return this.$store.state.a
    // },
    // student() {
    //   return this.$store.state.student
    // }
    //快速获得state中的值
    ...mapState(['a', 'student'])
  },
  props: {
    msg: String
  },
  methods: {
    add() {
      console.log(this.$store)
      //修改状态的数据
      this.$store.commit('add', 1)
      //再赋值
      this.num = this.$store.state.a
      console.log('修改成功')
    },
    // updatePass() {
    //   this.$store.commit('updatePass', '000000')
    // }
    ...mapMutations(['updatePass'])
  },
  mounted() {
    console.log(mapState)
  }
}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->

<style lang="less" scoped>
h3 {
  margin: 40px 0 0;
}

ul {
  list-style-type: none;
  padding: 0;
}

a {
  color: #42b983;
}
</style>
